<template>
  <el-container style="padding: 2%">
    <el-card>
      <el-row>
        <el-col :span="10">
          <el-card style="width: 100%;height: 500px;background-color: #FF9966">
            <div style="background-color: #fffff2;height: 440px;padding: 10px;border-radius:5px;overflow-y: auto">
              <Track></Track>
              <Track></Track>
              <Track></Track>
            </div>
          </el-card>
        </el-col>
        <el-col :span="14">
          <div id="main" style="width: 100%;height: 500px;background-color: #FFFFF0"></div>
        </el-col>
      </el-row>
      <el-card style="width: 100%;height: 350px;margin-top: 10px">
        <div slot="header" style="background-color: #FF9966">
          <el-cascader
              placeholder="搜索"
              :options="options"
              filterable
              :show-all-levels="false"
              :clearable="true"
              style="margin: 5px 0 5px 10px">
          </el-cascader>
        </div>
        <div>
          <el-col :span="12">
            <el-image></el-image>
          </el-col>
          <el-col :span="12">1111</el-col>
        </div>
      </el-card>
    </el-card>

  </el-container>
</template>

<script>
import * as echarts from 'echarts';
import Track from '../components/Track'
export default {
  name: "hszl",
  components: {Track},
  data() {
    return{
      options: [{
        value: 'xian',
        label: '西安市',
        children: [{
          value: 'xidian',
          label: '西电'
        },{
          value: 'xigongda',
          label: '西工大'
        }]
      }]
    }
  },
  mounted() {
    this.echartsInit()
  },
  methods: {
    echartsInit(){
      let myChart = echarts.init(document.getElementById('main'));
      let mapJson = require('../assets/MapData.json');
      echarts.registerMap("陕西", mapJson);// 注册地图
      myChart.on('click', function (params) {
        let city = params.name;
        console.log(city);
      });
      let option = {
        series: [
          {
            name: "陕西",
            type: "map",
            mapType: "陕西", // 自定义扩展图表类型
            label: {
              show: true,
            },
          },
        ],
      };

      myChart.setOption(option);
    }
  }
}


</script>

<style scoped>
.el-card {
  width: 60%;
}
</style>